<template>
  <div class="topMain">
      <div class="left regular">
          
          <div class="l">
                {{ texts }}
          </div>
          <router-link class="c" to="/qiming/sign">
                立即起名
          </router-link>
          <router-link class="c" to="/holdall">
              工具箱
          </router-link>
      </div>
      <div class="right" v-if="!isShow">
           <info></info>
          
      </div>
      <div class="mRight" @click="isMShow = !isMShow">
          <span></span>
          <span></span>
          <span></span>
      </div>
    <el-drawer
       
        custom-class="infoMobile"
       :show-close = "false"
       :visible.sync="isMShow"
        direction="rtl"
        size="80%">
            <left  v-if="isShow"></left>
    </el-drawer>
  </div>
</template>

<script>
import left from "./left"
import mes from "@/assets/images/backstage/message.svg"
import info from "@/components/userInfo"
export default {
    components:{
        info,
        left
    },
    data () {
        return {
            isShow:document.body.clientWidth < 750 ? true : false,
            isMShow:false,
            isMegShow:true,
            mes,
            size:28,
            circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            texts:"",
            list:[
                {
                    id:1001,
                    avatar:"",
                    isRead:false,
                    text:"[公告] 近期变动消息，请抓紧调整近期变动消息，请抓紧调整近期变动消息。",
                    time:"2019-10-10"
                },
                {
                    id:1002,
                    avatar:"",
                    isRead:false,
                    text:"[公告] 近期变动消息，请抓紧调整近期变动消息，请抓紧调整近期变动消息。",
                    time:"2019-10-10"
                },
                {
                    id:1003,
                    avatar:"",
                    isRead:false,
                    text:"[公告] 近期变动消息，请抓紧调整近期变动消息，请抓紧调整近期变动消息。",
                    time:"2019-10-10"
                },
            ]
        }
    },
    created () {
        if(this.$route.path == "/info/zhzl"){
            this.texts = "账户总览"
        }
        if(this.$route.path == "/info/qmjl"){
            this.texts = "起名记录"
        }
        if(this.$route.path == "/info/fkjl"){
            this.texts = "付款记录"
        }
        if(this.$route.path == "/info/zlsz"){
            this.texts = "资料设置"
        }
        if(this.$route.path == "/info/my"){
            this.texts = "我的名字"
        }
        if(this.$route.path == "/info/zlsz/uptPass"){
            this.texts = "修改密码"
        }
        if(this.$route.path == "/info/share"){
            this.texts = "分享赚佣金"
        }
    }
}
</script>

<style lang="scss" scoped>
.topMain{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 80px;
    .left{
        font-size: 16px;
        color: #9f9f9f;
        display: flex;
        align-items: center;
        .c{
            padding-left: 40px;
        }
    }
    .right{
        display: flex;
        align-items: center;
        cursor: pointer;
       
        .l{
            height: 80px;
            padding: 0 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1900;
            position: relative;
            img{
                height: 20px;
            }
            
        }
        .r{
            padding-left: 22px;
            display: flex;
            align-items: center;
            border-left: 2px solid #bdbdbd;
            .avatar{
                box-shadow: 0 0 10px #bdbebe;
                border-radius: 2px solid #fff;
            }
            i{
                margin-left: 6px;
            }
        }
    }
    .mRight{
        display: none;
    }
}
@media screen and (max-width: 750px){
    .topMain{
        .left{
            .c{
                // display: none;
                color: #405cda;
            }
        }
        .right{
            display: none;
        }
        .mRight{
            display: block;
            width: 20px;
            span{
                display: block;
                border-radius: 1px;
                margin-top: 4px;
                height: 2px;
                background-color: #405cda;
            }
        }
    }
    
}
</style>
<style lang="scss">
@media screen and (max-width: 750px){
    .infoMobile{
        .el-drawer__header{
            display: none;
        }
    }
}

#userInfos{
    .el-popover__reference{
        display: flex;
        align-items: center;
    }
}
.topss{
    dl{
        display: flex;
        align-items: center;
        // justify-content: center;
        flex-direction: column;
        dt{
            >div{
                padding: 9px;
                text-align: center;
            }
        }
        dd{
            width: 100%;
            line-height: 44px;
            text-align: center;
            border-top: 1px solid #e9e9e9;
        }
    }
    h4{
                    font-size: 14px;
                    line-height: 50px;
                    color: #d2d7f4;
                    background: #405cda;
                    text-align: center;
                }
}
.userPop{
    padding: 0;
    
    >img{

    }
}
#userTops{
display: flex;
    align-items: center;
    
}
#mesBox{
                
                // position: absolute;
                border-radius: 8px;
                z-index: 999;
                right:27px;
                top: 66px;
                overflow: hidden;
                width: 278px;
                
                background: transparent;
                 flex: 1;
                display: flex;
                flex-direction: column;
                // position: relative;
                background: #fff;
                box-shadow: 0 0 20px rgba(0,0,255,.3);
                // padding: 20px;
                .el-scrollbar__wrap{
        overflow-x: hidden!important;
    }
                .aa{
                   
                }
                // .aa:before{
                //     width: 0;
                //     height: 0;
                //     border:9px solid #fff;
                //     border-top-color: transparent;
                //     border-left-color: transparent;
                //     border-right-color: transparent;
                //     display: block;
                //     position: absolute;
                //     content:" .";
                //     top: -18px;
                //     z-index: 999;
                //     left: calc(50% - 9px);
                // }
                h2{
                    height: 50px;
                    padding-left: 24px;
                    display: flex;
                    align-items: center;
                    color: #7e7e7e;
                    font-weight: normal;
                    font-size: 16px;
                    line-height: 50px;
                    border-bottom: 1px solid #e9e9e9;
                    span{
                        color: #f28787;
                    }
                }
                ul{
                    padding: 20px 0;
                    padding-top: 0;
                    // min-height:50px;
                    height:240px;
                    overflow: hidden;
                    li{
                        margin: 0 25px;
                        border-bottom: 1px solid #e9e9e9;
                        padding-top: 20px;
                        padding-bottom: 10px;
                        display: flex;
                        align-items: flex-start;
                        h3{
                            font-size: 14px;
                            line-height: 24px;
                            color: #4e4e4e;
                        }
                        p{
                            font-size: 12px;
                            line-height: 20px;
                            color: #8b8b8b;
                        }
                        .listL{
                            margin-right: 17px;
                        }

                    }
                }
                h4{
                    font-size: 14px;
                    line-height: 50px;
                    color: #d2d7f4;
                    background: #405cda;
                    text-align: center;
                }
            }
</style>